<template>
    <div class="caipu">
     <!-- <h2>菜谱</h2> -->
     <hr>
     <div class="alltitle">
       <div class="alllef">
         <div class="overall">
             <p>综合</p>
         </div>
         <div class="collect">
          <p> 收藏多 </p> 
         </div>
         <div class="study">
            <p>学做多 </p> 
         </div>   
        </div> 
         <div class="vidio">
             <p>视频</p>
             <van-icon name="play-circle-o" size="20px" />
          </div>    
          
     </div>
     <hr>

     <div class="content"> 
        <div class="connen">
            <div class="grade">
              <div class="theall active">
                 全部
              </div> 
              <div class="one">
                 1-2年级
              </div>  
              <div class="two">
                 3-4年级
              </div> 
              <div class="thr">
                5-6年级
              </div>
              <div class="four">
                7-9年级
              </div>
            </div>
        </div>
     </div>
     <div class="import" v-for="(item,index) in productDataact " :key="index" > 
      <div class="imgs" @click="clicsearch()" >
        <img :src="item.r.p" alt="">
     </div>
     <div class="alltext">
        <div class="dishname">
         <h2> {{item.r.n}} </h2> 
        </div>
        <div class="score">
            {{item.r.rate}}分
        </div>
        <div class="detail">
            内容详情
        </div>
        <div class="foot">
            <div class="fooimg">
                <img :src="item.r.a.p" alt="">
            </div>
            <div class="authorna">
                {{item.r.a.n}}
            </div>
        </div>
     </div>
     </div> 
    </div>
</template>

<script>
    export default {
        name:"Caipu",
        data() {
    return {
        count: 10,
        isLoading: false,
         //热门的内容
        productDataact:[],
        //搜索的内容
        productSearch:[],
      
        tabIndex:0,
   
      
      value: "",
      productListRst:[], //产品列表
     //   productListRst:{},//搜索筛选之后的列表
    };
  },
  created() {
    // this.GetRecommend();
    // console.log(this.value);
    let va = this.$route.query.value;
    console.log('wo是va',va);
    this.GetRecommend(va)
  
  },
  methods: {
    //默认返回上一级
    back() {
      this.$router.push({ name:"Home"});
    },

    clicsearch(){
      this.$router.push({ name:"Caiputzh"});
    },
    getValue(){
        let va = this.value;
        console.log('这个是value',va);
    },

    GetRecommend(va){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/recipe/search?keyword=${va}`,
        //get请求参数写在params中
        query: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          recipeid:"3145896",
          keyword:"土豆饼",
          order:"0",
          type:"0",
          offset:"0",
          limit:"20",
        },

        // params: {
        //   appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        //   recipeid:"3145896",
        // },
      })
        .then((result) => {
        //   console.log("result土豆==>", result);
          this.productDataact = result.data.result.list;
        //   console.log(this.productDataact);
        //   this.productDataaend = result.data.list;
          
          console.log(" this.productDataact==>", this.productDataact);
   
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },
    }
    }
</script>

<style lang="less" scoped>
  .caipu{
   
    .alltitle{
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .alllef{
            display: flex;
        align-items: center;
        justify-content: space-around;
            .overall{
                p{
                  margin-right: 10px;
                }
            }
            .collect{
               p{
                margin-right: 10px;
               } 
            }
            .study{
               p{
                margin-right: 10px;
               }
            }
        }
        .vidio{
            display: flex;
            align-items: center;
            justify-content: space-between;
            p{
               margin-right: 8px;
            }
        }
    }
    .content{
        .connen{
            padding: 8px;

            .grade{
              display: flex;
              align-items: center;
              
              .theall{
                padding: 8px 20px ;
                color: #aaaaaa;
             

              }
              .active{
                font-size: medium;
                font-weight: 800;
                color: #2a2a2a;
                background-color: #ffc533;
                border-radius: 30px;
                margin-right: 6px;
              }
              .one{
                padding: 8px 10px;
                background-color:#fafafa;
                color: #aaaaaa;
                border-radius: 20px;
                margin-right: 6px;
              }
              .two{
                padding: 8px 10px;
                background-color:#fafafa;
                color: #aaaaaa;
                border-radius: 20px;
                margin-right: 6px;

              }
              .thr{
                padding: 8px 10px;
                background-color:#fafafa;
                color: #aaaaaa;
                border-radius: 20px;
                margin-right: 6px;

              }
              .four{
                padding: 8px 10px;
                background-color:#fafafa;
                color: #aaaaaa;
                border-radius: 20px;
                margin-right: 6px;

              }

            }
        }
    }
    .import{
        background-color: white;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 15px 8px;
      .imgs{
        width: 50%;
        overflow: hidden;
        border-radius: 5px;
        img{
          width: 100%;
          display: block;

        }
      }  
      .alltext{
        padding: 3px 15px;
        .dishname{
            h2{
              margin-top: 0;
              font-weight: 600;
              color: #373737;
            }
        }
        .score{
          margin-bottom: 15px;
          font-size: small;
          font-weight: 800;
          color:#555555 ;
        }
        .detail{
          font-size: small;
          font-weight: 700;
          margin-bottom: 15px;
          color:#787878 ;
        }
        .foot{
            display: flex;
            align-items: center;
            margin-top: 20px;
            .fooimg{
                overflow: hidden;
                width: 30px;
                height: 30px;
                border-radius: 50%;
               
              img{
                 width: 100%;
                 height: 100%;
                 display: block;
              }
            }
            .authorna{
              margin-left: 5px;
              color:#b0b0b0;
              font-size: medium;
              font-weight: 600;
            }
        }
      }
    }
  }
  
</style>